// 基础功能组件
import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
// 按钮视图组件
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'

// 按钮的图标 SVG
const scoreIcon = `<svg t="1589296175124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2650" width="200" height="200"><path d="M821.333333 256a32 32 0 0 1 64 0v565.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334h597.333333a32 32 0 0 1 0 64H256a53.333333 53.333333 0 0 0-53.333333 53.333334v618.666666a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V256zM341.333333 437.333333a32 32 0 0 1 0-64h341.333334a32 32 0 0 1 0 64H341.333333z m0 170.666667a32 32 0 0 1 0-64h213.333334a32 32 0 0 1 0 64H341.333333z" p-id="2651"></path></svg>
`

// 自定义组件需要继承基础组件
class Score extends Plugin {
    // 重写基础组件的初始化函数
    init () {
        // 获取当前编辑器
        const editor = this.editor
        // 从当前编辑器的配置中获取传入的自定义配置名称
        const score = this.editor.config.get('score')

        // 将自定义按钮添加到当前编辑器的组件工厂
        editor.ui.componentFactory.add('score', locale => {
            // 获取当前编辑器的按钮视图
            const view = new ButtonView(locale)

            // 在按钮视图中注入自定义按钮的名称、图标
            view.set({
                label: '插入量表变量',
                icon: scoreIcon,
                tooltip: true
            })

            // 点击按钮
            view.on('execute', () => {
                // 执行自定义配置中指定的回调函数
                score.handler.call(this.editor)
                // const viewFragment = this.editor.data.processor.toView( "hehe" );
                // const modelFragment = this.editor.data.toModel( viewFragment );
                // this.editor.model.insertContent(modelFragment);
            })

            // 返回修改后的视图内容
            return view
        })
    }
}

// 对外暴漏自定义组件
export default Score